<template>
  <div>
    <a-form
      ref="formRef"
      name="custom-validation"
      :model="formState"
      :rules="rules"
      v-bind="layout"
      @finish="handleFinish"
      @validate="handleValidate"
      @finishFailed="handleFinishFailed"
    >
      <a-form-item has-feedback style="margin-top: 23px;" label="论文题目" name="pass">
        <a-input
          v-model:value="formState.pass"
          autocomplete="off"
          placeholder="请输入内容"
        />
      </a-form-item>
      <a-form-item has-feedback label="选题背景" name="select">
        <a-input
          v-model:value="formState.select"
          autocomplete="off"
          placeholder="请输入内容"
        />
      </a-form-item>
      <a-form-item has-feedback label="内容工作" name="content">
        <a-textarea
          v-model:value="formState.content"
          autocomplete="off"
          placeholder="请输入内容"
        />
      </a-form-item>
      <a-form-item label="添加附件">
        <a-form-item name="dragger" no-style>
          <a-upload-dragger
            v-model:fileList="formState.dragger"
            name="files"
            action="/upload.do"
          >
            <p class="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
          </a-upload-dragger>
        </a-form-item>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 10 }">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button style="margin-left: 90px" @click="resetForm">取消</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { defineComponent, reactive, ref } from "vue";
const formRef = ref();
const formState = reactive({
  pass: "",
  checkPass: "",
  select:'',
  content:''
});

let validatePass = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请检查内容是否输入完成");
  } else {
    if (formState.checkPass !== "") {
      formRef.value.validateFields("checkPass");
    }
    return Promise.resolve();
  }
};

const rules = {
  pass: [
    {
      required: true,
      validator: validatePass,
      trigger: "change",
    },
  ],
  select: [
    {
      required: true,
      validator: validatePass,
      trigger: "change",
    },
  ],
  content: [
    {
      required: true,
      validator: validatePass,
      trigger: "change",
    },
  ],
};
const layout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 22,
  },
};
const handleFinish = (values) => {
  console.log(values);
};
const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style lang="scss" scoped>

.ant-form-item{
  margin: 46px 0;
}
</style>
